<template>
  <div id="setting">
  	<text-header :title="'个人信息'" :bgcolor="'rgba(65,203,71,1)'" :color="'#fff'" :topath="'/my'" class="textHeader"></text-header>
    <div class="row-model">
      <div class="row-title" @click="editInfo('name')">
        <span class="titletext">昵称</span>
        <span class="title-con">{{userinfo.name}}</span>
      </div>
      <div class="row-title" @click="editPhone()">
        <span class="titletext">手机号</span>
        <span class="title-con">{{userinfo.phoneNumber}}</span>
      </div>
      <div class="row-title" @click="selectShow">
        <span class="titletext">排行榜显示</span>
        <span class="title-con">{{userinfo.showFlag?'显示':'不显示'}}</span>
      </div>
      <div class="row-title" @click="editInfo('bodyHeight')">
        <span class="titletext">身高</span>
        <span class="title-con">{{userinfo.bodyHeight}}<span style="color: #bbb;margin-left: 2px;">cm</span></span>
      </div>
      <div class="row-title" @click="editInfo('bodyWeight')">
        <span class="titletext">体重</span>
        <span class="title-con">{{userinfo.bodyWeight}}<span style="color: #bbb;margin-left: 2px;">kg</span></span>
      </div>
    </div>
    <div class="row-model" @click="editpassword">
      <div class="row-title qrcode">
        <span class="titletext">修改密码</span>
        <span class="title-icon-play yadu-icon-xiangyou"></span>
      </div>
    </div>
    <div class="row-model">
      <div class="row-title qrcode">
        <span class="titletext">退出登录</span>
        <span class="title-icon-play yadu-icon-xiangyou"></span>
      </div>
    </div>
    <yd-actionsheet :items="showSelect" v-model="showFlag"></yd-actionsheet>
    <yd-popup v-model="editdialog" position="center" width="98%">
        <div class="editnickname">
            <div class="nameinputwrap">
              <yd-input v-if="edititem.name" class="nicknameinput" slot="right" required v-model="editTemp.name" max="10" placeholder="请输入昵称"></yd-input>
              <yd-input v-if="edititem.bodyHeight" class="nicknameinput" slot="right" required v-model="editTemp.bodyHeight" max="10" placeholder="请输入身高（cm）"></yd-input>
              <yd-input v-if="edititem.bodyWeight" class="nicknameinput" slot="right" required v-model="editTemp.bodyWeight" placeholder="请输入体重（kg）"></yd-input>
            </div>
            <yd-button class="submitBtn" @click.native="editdialog = false">确认</yd-button>
        </div>
    </yd-popup>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
export default {
  name: 'setting',
  components: {
    textHeader
  },
  data(){
  	return{
  		userinfo:{
  			name:'这里是昵称',
        phoneNumber:'18301638064',
  			src:'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',
  			bodyHeight:160,
  			bodyWeight:52,
        showFlag:false,
  			focuslist:[
  				{name:'健康',id:1},
  				{name:'养生',id:2},
  				{name:'养颜',id:3},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
  				{name:'跳舞',id:4}
  			],
        clocklist:[
          {time:'06:00',id:1},
          {time:'07:00',id:2},
          {time:'08:00',id:3},
          {time:'09:00',id:4},
          {time:'10:00',id:5},
          {time:'11:00',id:6},
          {time:'12:00',id:7},
        ]
  		},
      showFlag:false,
      showSelect:[
        {
            label: '显示',
            callback: () => {
                this.userinfo.showFlag=true;
            }
        },
        {
            label: '不显示',
            callback: () => {
                this.userinfo.showFlag=false;
            }
        }
      ],
      editdialog:false,
      edititem:{
        name:false,
        bodyHeight:false,
        bodyWeight:false
      },
      editTemp:{
        name:'',
        bodyHeight:'',
        bodyWeight:''
      }
      
  	}
  },
  methods:{
    selectShow(){
      console.log(this.showFlag);
      this.showFlag = true;
    },
    editInfo(name){
      this.editdialog = true;
      for(var i in this.edititem){
        this.edititem[i] = false;
      }
      this.edititem[name] = true;
      // this.editTemp[name] = this.userinfo[name];
    },
    editPhone(){
      this.$router.push('/editphone')
    },
    editpassword(){
      this.$router.push('/editpassword')
    }

  }
}
</script>
<style lang="scss">
	@import "../style/public.scss";
	#setting{
    background:#f1f1f1;
    height:100%;
		.row-model{
      background:#fff;
			padding:0 rem(20);
      margin-bottom:rem(20);
			.row-title{
				display:flex;
        align-items:center;
        padding:rem(28) 0;
        border-bottom:rem(2) solid #f8f8f8;
				.titletext{
          height:rem(28);
          line-height:rem(28);
          flex:1;
          text-align:left;
          align-self:center;
					align-self:center;
				}
        .title-icon-edit{
          height:rem(28);
          line-height:rem(28);
          color:#ebebeb;
        }
			}
		}
    .editnickname{
      padding:rem(20);
      .nameinputwrap{
        background:#fff;
        border-radius:rem(8);
        margin-bottom:rem(15);
      }
      .submitBtn{
        color:#fff;
        font-size:rem(28);
        background:rgba(0,0,0,0);
      }
      .nicknameinput{
        padding:0 rem(20);
        height:rem(80);
        line-height:rem(80);
      }
    }
    .yd-popup-center{
      top:rem(242);
    }
	}
</style>
